#{extends 'Secure/layout.html' /}

<div id="login" > <p>&{'secure.title'}</p>
		
		<img alt="error" style="border-radius:50px;" src="@{'/public/images/cadenas.jpg'}" />

	#{form @authenticate()}
            	
            	<table>
            		<tr id="username-field">
            			<td><label for="username">&{'secure.username'}</label></td>
            			<td><input type="text" name="username" id="username" value="${flash.username}" /></td>
            		</tr>
            		<tr id="password-field">
            			<td><label for="password">&{'secure.password'}</label></td>
            			<td><input type="password" name="password" id="password" value="" /></td>
            		</tr>
            		<tr id="remember-field">
            			<td><input type="checkbox" name="remember" id="remember" value="true" ${flash.remember ? 'checked="true"' : ''} /></td>
            			<td><label for="remember">&{'secure.remember'}</label></td>
            		</tr>
            		<tr id="signin-field">
						<td colspan="2"><input type="submit" id="signin" value="&{'secure.signin'}" /></td>
					</tr>
            	</table>

				
				#{if flash.error}
					<div class="border_error">
						<div class="error">&{flash.error}</div>
					</div>
				#{/if}
				#{if flash.success}
					<div class="border_succes">
						<div class="succes">&{flash.success}</div>
					</div>
				#{/if}
						
                
            #{/form}
		</div>